<template>
	<view class="container">
		<view class="section">
			<text class="section-title">核销信息</text>
			<view class="info-item">
				<view class="info-label">核销码：</view>
				<view class="info-value">{{ verification.code }}</view>
			</view>
			<view class="info-item">
				<text class="info-label">车辆：</text>
				<text class="info-value">{{ verification.car }}</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">服务内容</text>
			<view class="service-item">
				<view class="service-label">车辆精洗</view>
				<view class="service-value">￥100</view>
			</view>
			<view class="service-item">
				<view class="service-label">车辆附加费用</view>
				<text class="service-value">￥100</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">订单信息</text>
			<view class="order-item">
				<text class="order-label">原价</text>
				<text class="order-value">￥100</text>
			</view>
			<view class="order-item">
				<text class="order-label">优惠</text>
				<text class="order-value" :style="{ color: isWriteOff ? '' : 'red' }">-￥10</text>
			</view>
			<view class="order-item">
				<text class="order-label">实付金额</text>
				<text class="order-value" :style="{ color: isWriteOff ? '' : 'red' }">￥25.00</text>
			</view>
			<view class="order-item">
				<text class="order-label">订单编号</text>
				<text class="order-value">{{ order.id }}</text>
			</view>
			<view class="order-item">
				<text class="order-label">预约时间</text>
				<text class="order-value">{{ order.appointmentTime }}</text>
			</view>
			<view class="order-item">
				<text class="order-label">支付时间</text>
				<text class="order-value">{{ order.paymentTime }}</text>
			</view>
			<view class="order-item">
				<text class="order-label">核销时间</text>
				<text class="order-value">{{ order.verificationTime }}</text>
			</view>
		</view>

		<view class="button-section">
			<button class="confirm-button" v-show="isWriteOff" @click="showConfirmDialog">确认核销</button>
			<button class="confirm-button" v-show="!isWriteOff" style="background-color:gray;"
				@click="toOrderManagement">已核销</button>
		</view>

		<view v-if="showDialog" class="confirm-dialog">
			<view class="dialog-content">
				<view class="dialog-title">核销此订单</view>
				<text class="dialog-message">请您仔细核对订单，此操作不可撤销，请谨慎操作</text>
				<view class="dialog-buttons">
					<text class="dialog-button" @click="confirmWriteOff">核销</text>
					<text class="dialog-button" @click="hideDialog">取消</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const verification = ref({
		code: "MC-1234-5678-9012",
		car: "奔驰FWE 4/豫A98FHJ",
	});

	const order = ref({
		id: "1223233445",
		appointmentTime: "2020-02-18 19:24:28",
		paymentTime: "2020-02-18 19:24:28",
		verificationTime: "2020-02-18 19:24:28",
	});

	const confirmVerification = () => {
		// uni.showToast({
		// 	title: "核销成功",
		// 	icon: "success",
		// });
	};

	// 显示确认对话框
	const showConfirmDialog = () => {
		showDialog.value = true;
	};
	// 确认核销方法，此处仅为模拟，可替换为实际接口调用
	const confirmWriteOff = () => {
		showDialog.value = false;
		console.log('点击确认核销，此处可添加调用后端接口逻辑');
		uni.showToast({
			title: '核销成功',
			icon: 'success',
			duration: 1000
		});
		isWriteOff.value = false;

	};

	// 控制弹出框显示隐藏
	const showDialog = ref(false);
	// 确认核销和已核销
	const isWriteOff = ref(true);

	// 隐藏对话框
	const hideDialog = () => {
		showDialog.value = false;
	};

	function toOrderManagement() {
		uni.navigateTo({
			url: '/pages/index/orderManagement/orderManagement'
		})
	}
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.section {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #333333;
		margin-right: 10rpx;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.info-value {
		font-size: 28rpx;
		color: #666666;
		flex: 1;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.service-label {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.service-value {
		font-size: 28rpx;
		color: #666666;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.order-label {
		font-size: 28rpx;
		color: #333333;
	}

	.order-value {
		font-size: 28rpx;
		color: #666666;
	}

	.button-section {
		margin-top: 20rpx;
	}

	.confirm-button {
		width: 500rpx;
		height: 80rpx;
		background-color: #007aff;
		color: #ffffff;
		font-size: 32rpx;
		border: none;
		outline: none;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.confirm-dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dialog-content {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 40rpx;
		text-align: center;
		width: 80%;
		max-width: 500rpx;
	}

	.dialog-title {
		font-size: 36rpx;
		margin-bottom: 20rpx;
		font-weight: 550;
	}

	.dialog-message {
		font-size: 30rpx;
		margin-bottom: 30rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.dialog-buttons {
		display: flex;
		justify-content: space-around;
		margin-top: 60rpx;
	}

	.dialog-button {
		font-size: 34rpx;
		color: #007AFF;
	}
</style>